<template>
  <div class="full_screen" style="padding: 0px;height: calc(100% - 10px)">

    <el-row :gutter="10" style="height:100%">
      <el-col :span="10" style="height:100%">
        <div style="display: flex;flex-direction: column;height: 100%;">

          <div style="flex: 1;overflow-y: hidden;">
            <dv-border-box-10 id="tableWrapper">
              <dv-scroll-board :config="config" :item-size="30" :page-size="10" :page-count="3"
                :style="{width: '100%',height: tableHeight+'px'}" />
            </dv-border-box-10>
          </div>

        </div>
      </el-col>
      <el-col :span="14" style="height:100%;">
        <div style="flex: 1 ;display: flex;flex-direction: column;height: 100%;width: 100%;">
          <!-- <dv-charts :option="option1" style="height: 400px;" />
            <dv-charts :option="option1" style="height: 400px;" /> -->
          <div style="flex: 1;">
            <dv-border-box-8 :color="['#025d6d']">
              <div style="height:100%;" ref="echarts1"> </div>
            </dv-border-box-8>

          </div>
          <div style="flex: 1;margin-top: 5px;">

            <dv-border-box-8 :color="['#025d6d']" style="">
              <div style="height:100%;width: calc(100% - 40px);" ref="echarts2"> </div>
            </dv-border-box-8>
          </div>

        </div>
      </el-col>

    </el-row>
  </div>
</template>
<script>
// import Charts from '@jiaminghi/charts';
import pieOption1 from './charts/pie1';
import pieOption2 from './charts/bar1';
import { queryStandardStatusList } from '@/service/standardStatus';
export default {
  components: {},
  data() {
    return {
      loading: true,
      tableHeight: 600,
      config: {
        indexHeader: '序号',
        // oddRowBGC: 'green', // 奇数行背景色
        // evenRowBGC: '#000', // 偶数行背景色
        // headerBGC: '#eb5a6d', // 表头背景色
        header: ['企业名称', '一级', '二级', '三级', '未创建'],
        rowNum: 18, // 表行数
        index: true,
        headerHeight: 40,
        carousel: 'page',
        columnWidth: [50, 300],
        waitTime: 3000, // 轮播时间间隔(ms)
        align: ['center', 'center', 'center', 'center', 'center', 'center'],
        tableData: [],

        data: [
          [
            '有很多活动写不完',
            "<span class='point-class' style='color: #08C887;'><i class='el-icon-edit'></i></sapn>",
          ],
        ],
      },
      option1: {},
    };
  },
  methods: {
    initCharts() {
      // const container = document.getElementById('container1');
      this.myChart = this.$echarts.init(this.$refs.echarts1);
      // myChart.setOption(pieOption1);

      this.myChart1 = this.$echarts.init(this.$refs.echarts2);
      // myChart1.setOption(pieOption2);

      window.onresize = function () {
        //自适应大小
        this.myChart.resize();
        this.myChart1.resize();
      };
    },
    loadPieCharts() {
      let count1 = this.config.tableData.filter(
        (item, i) => item.level1
      ).length;
      let count2 = this.config.tableData.filter(
        (item, i) => item.level2
      ).length;
      let count3 = this.config.tableData.filter(
        (item, i) => item.level3
      ).length;
      let count4 = this.config.tableData.filter(
        (item, i) => item.level4
      ).length;
      const countList = [count1, count2, count3, count4];
      pieOption1.series[0].data.forEach((item, index) => {
        item.value = countList[index];
      });
      pieOption1.series[1].data.forEach((item, index) => {
        item.value = countList[index];
      });
      this.myChart.setOption(pieOption1);
    },
    loadBarCharts() {
      let count1 = this.config.tableData.filter(
        (item, i) => item.level1
      ).length;
      let count2 = this.config.tableData.filter(
        (item, i) => item.level2
      ).length;
      let count3 = this.config.tableData.filter(
        (item, i) => item.level3
      ).length;
      let count4 = this.config.tableData.filter(
        (item, i) => item.level4
      ).length;
      const countList = [count1, count2, count3, count4];
      pieOption2.series[0].data = countList;
      this.myChart1.setOption(pieOption2);
    },

    async loadTable() {
      const res = await queryStandardStatusList({});
      if (res.dataList[0]) {
        const tableData = res.dataList;
        const dataTable = tableData.map((item, index) => {
          const level1 = item.level1 || '';
          const level2 = item.level2 || '';
          const level3 = item.level3 || '';
          const level4 = item.level4 || '';

          return [
            // (index+1)+"",
            item.compName,

            level1 == '●' ? "<span class='active_dot-class' ></sapn>" : level1,
            level2 == '●' ? "<span class='active_dot-class' ></sapn>" : level2,
            level3 == '●' ? "<span class='active_dot-class' ></sapn>" : level3,
            level4 == '●'
              ? "<span class='active_dot-class' style=''></sapn>"
              : level4,
          ];
        });

        // this.$set(this.config, 'data', dataTable);
        this.config = {
          indexHeader: '序号',
          // oddRowBGC: 'green', // 奇数行背景色
          // evenRowBGC: '#000', // 偶数行背景色
          // headerBGC: '#eb5a6d', // 表头背景色
          header: ['企业名称', '一级', '二级', '三级', '未创建'],
          rowNum: 18, // 表行数
          index: true,
          headerHeight: 40,
          carousel: 'page',
          columnWidth: [50, 300],
          waitTime: 3000, // 轮播时间间隔(ms)
          align: ['center', 'center', 'center', 'center', 'center', 'center'],
          tableData,
          data: dataTable,
        };

        this.loadPieCharts();
        this.loadBarCharts();
        console.log('dataTable', dataTable);
      }
    },
  },

  mounted() {
    const vm = this;
    vm.initCharts();

    this.loadTable();

    this.$nextTick().then(
      function () {
        this.tableHeight =
          document.getElementById('tableWrapper').clientHeight - 20;
        console.log('this.tableHeight', this.tableHeight);
      }.bind(this)
    );
  },
};
</script>
<style scoped>
.user_skills {
  width: 50%;
  margin: auto;
}

.user_skills /deep/ .el-table--fit {
  padding: 20px;
}

.user_skills /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table tr {
  background-color: transparent !important;
}

.user_skills /deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.user_skills /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.full_screen > .border-box-content {
  padding-top: 45px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}
</style>